html
    include include/header.pug
    script(src='https://webapi.amap.com/maps?v=1.4.2&key=c75741b6f2144f1c55dddbb864d76b4b')
    body
        include include/navbar
        div#container(style='height:900px').col-md-6
        div(style='float:right').col-md-6
            h2 AQI渲染图片
            h3 接口：/render/spa
            h3 参数：
            h4 data
            p.
                空气质量数据 data: {
                <br/>datas: [{lat: 32.7722, value: 100.0, lng: 116.7847, text: '测试1'},
               <br/>{lat: 32.7322, value: 150.0, lng: 116.75847, text: '测试2'}],
               <br/>paramName: "PM10",min:0,max:250
                <br/>},
            h4    center:
            p 图片中心点经纬度 [116.8447, 32.7722],
            h4    scale:
            p 图片缩放值 参考值 中国:550-850,省份:4000 需要根据图片大小调整
            h4    size: ,
            p 图片大小 [500, 400]
            h4    sectorName:
            p 行政区名称:'广东省'
            h3 示例：
            p.
                    /render/spa?data[datas][0][lat]=22.5794&data[datas][0][lng]=113.891&data[datas][0][value]=207&data[datas][1][lat]=22.5422&data[datas][1][lng]=114.494&data[datas][1][value]=36&data[datas][2][lat]=22.6342&data[datas][2][lng]=114.41&data[datas][2][value]=83&data[datas][3][lat]=22.4251&data[datas][3][lng]=113.628&data[datas][3][value]=134&data[datas][4][lat]=23.0048&data[datas][4][lng]=113.134&data[datas][4][value]=187&data[datas][5][lat]=23.0395&data[datas][5][lng]=113.105&data[datas][5][value]=201&data[datas][6][lat]=23.0467&data[datas][6][lng]=113.144&data[datas][6][value]=153&data[datas][7][lat]=22.8054&data[datas][7][lng]=113.292&data[datas][7][value]=118&data[datas][8][lat]=22.7629&data[datas][8][lng]=113.257&data[datas][8][value]=334&data[datas][9][lat]=22.8693&data[datas][9][lng]=112.844&data[datas][9][value]=66&data[datas][10][lat]=22.5481&data[datas][10][lng]=113.365&data[datas][10][value]=140&data[datas][11][lat]=22.5078&data[datas][11][lng]=113.402&data[datas][11][value]=91&data[datas][12][lat]=22.6069&data[datas][12][lng]=113.104&data[datas][12][value]=226&data[datas][13][lat]=22.5811&data[datas][13][lng]=113.074&data[datas][13][value]=227&data[datas][14][lat]=22.5328&data[datas][14][lng]=113.024&data[datas][14][value]=158&data[datas][15][lat]=22.5931&data[datas][15][lng]=113.0819&data[datas][15][value]=218&data[datas][16][lat]=23.05361111&data[datas][16][lng]=113.7819444&data[datas][16][value]=206&data[datas][17][lat]=23.4208&data[datas][17][lng]=113.073&data[datas][17][value]=108&data[datas][18][lat]=22.819722&data[datas][18][lng]=113.261667&data[datas][18][value]=99&data[datas][19][lat]=23.0019&data[datas][19][lng]=113.1047&data[datas][19][value]=199&data[datas][20][lat]=22.9398&data[datas][20][lng]=114.3806&data[datas][20][value]=79&data[datas][21][lat]=23.3406&data[datas][21][lng]=114.1077&data[datas][21][value]=28&data[datas][22][lat]=22.5862&data[datas][22][lng]=112.5814&data[datas][22][value]=68&data[datas][23][lat]=22.7279&data[datas][23][lng]=112.929&data[datas][23][value]=178&data[datas][24][lat]=22.0608&data[datas][24][lng]=112.7607&data[datas][24][value]=41&data[datas][25][lat]=23.42&data[datas][25][lng]=117.0219&data[datas][25][value]=33&data[datas][26][lat]=23.1323&data[datas][26][lng]=113.3208&data[datas][26][value]=183&data[datas][27][lat]=22.578889&data[datas][27][lng]=111.342222&data[datas][27][value]=38&data[datas][28][lat]=20.30056&data[datas][28][lng]=110.20056&data[datas][28][value]=67&data[datas][29][lat]=23.76722&data[datas][29][lng]=115.965&data[datas][29][value]=29&data[datas][30][lat]=23.65889&data[datas][30][lng]=116.6183&data[datas][30][value]=152&data[datas][31][lat]=23.62586&data[datas][31][lng]=112.4167&data[datas][31][value]=75&data[datas][32][lat]=23.06&data[datas][32][lng]=113.7480556&data[datas][32][value]=220&data[datas][33][lat]=23.01277778&data[datas][33][lng]=113.7944444&data[datas][33][value]=109&data[datas][34][lat]=22.96583333&data[datas][34][lng]=113.7383333&data[datas][34][value]=133&data[datas][35][lat]=23.0528&data[datas][35][lng]=114.4183&data[datas][35][value]=193&data[datas][36][lat]=23.08&data[datas][36][lng]=114.4053&data[datas][36][value]=176&data[datas][37][lat]=23.1142&data[datas][37][lng]=114.4103&data[datas][37][value]=122&data[datas][38][lat]=22.8172&data[datas][38][lng]=114.3244&data[datas][38][value]=159&data[datas][39][lat]=23.0528&data[datas][39][lng]=112.471&data[datas][39][value]=99&data[datas][40][lat]=23.1617&data[datas][40][lng]=112.565&data[datas][40][value]=53&data[datas][41][lat]=23.0786&data[datas][41][lng]=112.4722&data[datas][41][value]=79&data[datas][42][lat]=24.8108&data[datas][42][lng]=113.5397&data[datas][42][value]=133&data[datas][43][lat]=24.7992&data[datas][43][lng]=113.6081&data[datas][43][value]=171&data[datas][44][lat]=24.6861&data[datas][44][lng]=113.5964&data[datas][44][value]=100&data[datas][45][lat]=23.3633&data[datas][45][lng]=116.7244&data[datas][45][value]=56&data[datas][46][lat]=23.2775&data[datas][46][lng]=116.7258&data[datas][46][value]=45&data[datas][47][lat]=23.4714&data[datas][47][lng]=116.7519&data[datas][47][value]=68&data[datas][48][lat]=23.2539&data[datas][48][lng]=116.6092&data[datas][48][value]=77&data[datas][49][lat]=23.2536&data[datas][49][lng]=116.4019&data[datas][49][value]=72&data[datas][50][lat]=21.2228&data[datas][50][lng]=110.3928&data[datas][50][value]=109&data[datas][51][lat]=21.2679&data[datas][51][lng]=110.3316&data[datas][51][value]=116&data[datas][52][lat]=21.2567&data[datas][52][lng]=110.4558&data[datas][52][value]=83&data[datas][53][lat]=21.4689&data[datas][53][lng]=111.0286&data[datas][53][value]=84&data[datas][54][lat]=21.6828&data[datas][54][lng]=110.8592&data[datas][54][value]=112&data[datas][55][lat]=24.3289&data[datas][55][lng]=116.1278&data[datas][55][value]=70&data[datas][56][lat]=24.2654&data[datas][56][lng]=116.1248&data[datas][56][value]=113&data[datas][57][lat]=22.775&data[datas][57][lng]=115.3653&data[datas][57][value]=46&data[datas][58][lat]=22.7953&data[datas][58][lng]=115.3578&data[datas][58][value]=42&data[datas][59][lat]=23.7233&data[datas][59][lng]=114.6892&data[datas][59][value]=140&data[datas][60][lat]=23.6706&data[datas][60][lng]=116.6447&data[datas][60][value]=91&data[datas][61][lat]=23.5353&data[datas][61][lng]=116.3697&data[datas][61][value]=118&data[datas][62][lat]=23.5486&data[datas][62][lng]=116.3242&data[datas][62][value]=128&data[datas][63][lat]=23.5739&data[datas][63][lng]=116.3594&data[datas][63][value]=122&data[datas][64][lat]=23.5292&data[datas][64][lng]=116.4094&data[datas][64][value]=114&data[datas][65][lat]=22.9539&data[datas][65][lng]=112.0539&data[datas][65][value]=64&data[datas][66][lat]=23.6502&data[datas][66][lng]=113.6246&data[datas][66][value]=82&data[datas][67][lat]=22.7108&data[datas][67][lng]=113.5485&data[datas][67][value]=152&data[datas][68][lat]=23.1064&data[datas][68][lng]=113.3328&data[datas][68][value]=222&data[datas][69][lat]=23.1422&data[datas][69][lng]=113.235&data[datas][69][value]=291&data[datas][70][lat]=23.105&data[datas][70][lng]=113.261&data[datas][70][value]=253&data[datas][71][lat]=23.105&data[datas][71][lng]=113.433&data[datas][71][value]=250&data[datas][72][lat]=23.3917&data[datas][72][lng]=113.215&data[datas][72][value]=226&data[datas][73][lat]=23.1331&data[datas][73][lng]=113.26&data[datas][73][value]=213&data[datas][74][lat]=22.55&data[datas][74][lng]=114.096&data[datas][74][value]=186&data[datas][75][lat]=22.5625&data[datas][75][lng]=114.117&data[datas][75][value]=190&data[datas][76][lat]=22.5417&data[datas][76][lng]=113.987&data[datas][76][value]=171&data[datas][77][lat]=22.5167&data[datas][77][lng]=113.923&data[datas][77][value]=215&data[datas][78][lat]=22.5908&data[datas][78][lng]=114.263&data[datas][78][value]=146&data[paramName]=PM10&data[unit]=ug/m3' +
                                            '&center[]=113.2363&center[]=23.1572&scale=4000&size[]=600&size[]=500&sectorName=广东省
        script.
            var sector = '广东省';
            $.ajax({url:'/render/location?center[]=113.2363&center[]=23.1572&scale=4000&size[]=600&size[]=500&sectorName=' +sector,type:'get',
                success:function (res) {
                ne = res.ne;sw = res.sw;
                init();
            }
            });

            var init = function () {
                var imageLayer = new AMap.ImageLayer({
                    url: '/render/spa?data[datas][0][lat]=22.5794&data[datas][0][lng]=113.891&data[datas][0][value]=207&data[datas][1][lat]=22.5422&data[datas][1][lng]=114.494&data[datas][1][value]=36&data[datas][2][lat]=22.6342&data[datas][2][lng]=114.41&data[datas][2][value]=83&data[datas][3][lat]=22.4251&data[datas][3][lng]=113.628&data[datas][3][value]=134&data[datas][4][lat]=23.0048&data[datas][4][lng]=113.134&data[datas][4][value]=187&data[datas][5][lat]=23.0395&data[datas][5][lng]=113.105&data[datas][5][value]=201&data[datas][6][lat]=23.0467&data[datas][6][lng]=113.144&data[datas][6][value]=153&data[datas][7][lat]=22.8054&data[datas][7][lng]=113.292&data[datas][7][value]=118&data[datas][8][lat]=22.7629&data[datas][8][lng]=113.257&data[datas][8][value]=334&data[datas][9][lat]=22.8693&data[datas][9][lng]=112.844&data[datas][9][value]=66&data[datas][10][lat]=22.5481&data[datas][10][lng]=113.365&data[datas][10][value]=140&data[datas][11][lat]=22.5078&data[datas][11][lng]=113.402&data[datas][11][value]=91&data[datas][12][lat]=22.6069&data[datas][12][lng]=113.104&data[datas][12][value]=226&data[datas][13][lat]=22.5811&data[datas][13][lng]=113.074&data[datas][13][value]=227&data[datas][14][lat]=22.5328&data[datas][14][lng]=113.024&data[datas][14][value]=158&data[datas][15][lat]=22.5931&data[datas][15][lng]=113.0819&data[datas][15][value]=218&data[datas][16][lat]=23.05361111&data[datas][16][lng]=113.7819444&data[datas][16][value]=206&data[datas][17][lat]=23.4208&data[datas][17][lng]=113.073&data[datas][17][value]=108&data[datas][18][lat]=22.819722&data[datas][18][lng]=113.261667&data[datas][18][value]=99&data[datas][19][lat]=23.0019&data[datas][19][lng]=113.1047&data[datas][19][value]=199&data[datas][20][lat]=22.9398&data[datas][20][lng]=114.3806&data[datas][20][value]=79&data[datas][21][lat]=23.3406&data[datas][21][lng]=114.1077&data[datas][21][value]=28&data[datas][22][lat]=22.5862&data[datas][22][lng]=112.5814&data[datas][22][value]=68&data[datas][23][lat]=22.7279&data[datas][23][lng]=112.929&data[datas][23][value]=178&data[datas][24][lat]=22.0608&data[datas][24][lng]=112.7607&data[datas][24][value]=41&data[datas][25][lat]=23.42&data[datas][25][lng]=117.0219&data[datas][25][value]=33&data[datas][26][lat]=23.1323&data[datas][26][lng]=113.3208&data[datas][26][value]=183&data[datas][27][lat]=22.578889&data[datas][27][lng]=111.342222&data[datas][27][value]=38&data[datas][28][lat]=20.30056&data[datas][28][lng]=110.20056&data[datas][28][value]=67&data[datas][29][lat]=23.76722&data[datas][29][lng]=115.965&data[datas][29][value]=29&data[datas][30][lat]=23.65889&data[datas][30][lng]=116.6183&data[datas][30][value]=152&data[datas][31][lat]=23.62586&data[datas][31][lng]=112.4167&data[datas][31][value]=75&data[datas][32][lat]=23.06&data[datas][32][lng]=113.7480556&data[datas][32][value]=220&data[datas][33][lat]=23.01277778&data[datas][33][lng]=113.7944444&data[datas][33][value]=109&data[datas][34][lat]=22.96583333&data[datas][34][lng]=113.7383333&data[datas][34][value]=133&data[datas][35][lat]=23.0528&data[datas][35][lng]=114.4183&data[datas][35][value]=193&data[datas][36][lat]=23.08&data[datas][36][lng]=114.4053&data[datas][36][value]=176&data[datas][37][lat]=23.1142&data[datas][37][lng]=114.4103&data[datas][37][value]=122&data[datas][38][lat]=22.8172&data[datas][38][lng]=114.3244&data[datas][38][value]=159&data[datas][39][lat]=23.0528&data[datas][39][lng]=112.471&data[datas][39][value]=99&data[datas][40][lat]=23.1617&data[datas][40][lng]=112.565&data[datas][40][value]=53&data[datas][41][lat]=23.0786&data[datas][41][lng]=112.4722&data[datas][41][value]=79&data[datas][42][lat]=24.8108&data[datas][42][lng]=113.5397&data[datas][42][value]=133&data[datas][43][lat]=24.7992&data[datas][43][lng]=113.6081&data[datas][43][value]=171&data[datas][44][lat]=24.6861&data[datas][44][lng]=113.5964&data[datas][44][value]=100&data[datas][45][lat]=23.3633&data[datas][45][lng]=116.7244&data[datas][45][value]=56&data[datas][46][lat]=23.2775&data[datas][46][lng]=116.7258&data[datas][46][value]=45&data[datas][47][lat]=23.4714&data[datas][47][lng]=116.7519&data[datas][47][value]=68&data[datas][48][lat]=23.2539&data[datas][48][lng]=116.6092&data[datas][48][value]=77&data[datas][49][lat]=23.2536&data[datas][49][lng]=116.4019&data[datas][49][value]=72&data[datas][50][lat]=21.2228&data[datas][50][lng]=110.3928&data[datas][50][value]=109&data[datas][51][lat]=21.2679&data[datas][51][lng]=110.3316&data[datas][51][value]=116&data[datas][52][lat]=21.2567&data[datas][52][lng]=110.4558&data[datas][52][value]=83&data[datas][53][lat]=21.4689&data[datas][53][lng]=111.0286&data[datas][53][value]=84&data[datas][54][lat]=21.6828&data[datas][54][lng]=110.8592&data[datas][54][value]=112&data[datas][55][lat]=24.3289&data[datas][55][lng]=116.1278&data[datas][55][value]=70&data[datas][56][lat]=24.2654&data[datas][56][lng]=116.1248&data[datas][56][value]=113&data[datas][57][lat]=22.775&data[datas][57][lng]=115.3653&data[datas][57][value]=46&data[datas][58][lat]=22.7953&data[datas][58][lng]=115.3578&data[datas][58][value]=42&data[datas][59][lat]=23.7233&data[datas][59][lng]=114.6892&data[datas][59][value]=140&data[datas][60][lat]=23.6706&data[datas][60][lng]=116.6447&data[datas][60][value]=91&data[datas][61][lat]=23.5353&data[datas][61][lng]=116.3697&data[datas][61][value]=118&data[datas][62][lat]=23.5486&data[datas][62][lng]=116.3242&data[datas][62][value]=128&data[datas][63][lat]=23.5739&data[datas][63][lng]=116.3594&data[datas][63][value]=122&data[datas][64][lat]=23.5292&data[datas][64][lng]=116.4094&data[datas][64][value]=114&data[datas][65][lat]=22.9539&data[datas][65][lng]=112.0539&data[datas][65][value]=64&data[datas][66][lat]=23.6502&data[datas][66][lng]=113.6246&data[datas][66][value]=82&data[datas][67][lat]=22.7108&data[datas][67][lng]=113.5485&data[datas][67][value]=152&data[datas][68][lat]=23.1064&data[datas][68][lng]=113.3328&data[datas][68][value]=222&data[datas][69][lat]=23.1422&data[datas][69][lng]=113.235&data[datas][69][value]=291&data[datas][70][lat]=23.105&data[datas][70][lng]=113.261&data[datas][70][value]=253&data[datas][71][lat]=23.105&data[datas][71][lng]=113.433&data[datas][71][value]=250&data[datas][72][lat]=23.3917&data[datas][72][lng]=113.215&data[datas][72][value]=226&data[datas][73][lat]=23.1331&data[datas][73][lng]=113.26&data[datas][73][value]=213&data[datas][74][lat]=22.55&data[datas][74][lng]=114.096&data[datas][74][value]=186&data[datas][75][lat]=22.5625&data[datas][75][lng]=114.117&data[datas][75][value]=190&data[datas][76][lat]=22.5417&data[datas][76][lng]=113.987&data[datas][76][value]=171&data[datas][77][lat]=22.5167&data[datas][77][lng]=113.923&data[datas][77][value]=215&data[datas][78][lat]=22.5908&data[datas][78][lng]=114.263&data[datas][78][value]=146' +
                    '&data[paramName]=PM10&data[unit]=ug/m3' +
                    '&data[min]=0&data[max]=420' +
                        '&center[]=113.2363&center[]=23.1572&scale=4000&size[]=600&size[]=500&conrec=true&sectorName=' +
                        sector,
                    bounds: new AMap.Bounds(sw, ne),
                    zooms: [3, 18]
                });

                var map = new AMap.Map('container', {
                    resizeEnable: true,
                    center: [112.261, 23.096],
                    zoom: 7,
                    layers: [new AMap.TileLayer(),imageLayer]});
            }